<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性05</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>


<!--
        computed和watch之间的区别：
            1.computed能完成的功能，watch都可以完成。
            2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
        两个重要的小原则：
            1.被Vue管理的函数，最好写成普通函数，这样this指向的才是vm或组件实例对象
            2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等,promise的回调函数），最好写成箭头函数。
              这样的this才指向的是vm或组件实例对象
-->
<body>
<!-- 准备好 一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
      data:{
        firstName:'张',
        lastName:'三',
        fullName:'张-三'
      },
      watch:{
        firstName(value){
            setTimeout(()=>{
                this.fullName = value +'-'+this.lastName
            },10000);
            // console.log('firstName被改变了',newValue,oldValue)
        },
        lastName(value){
            this.fullName =  this.firstName+'-'+value
            // console.log('lastName被改变了',newValue,oldValue)
        }
      }
  })

</script>

</body>
</html>
